Gesture Handler দিয়ে Touch এবং Gestures ম্যানেজ করা

React Native এ Gesture Handler ব্যবহার করে আপনি Touch এবং Gestures ম্যানেজ করতে পারেন। React Native এর ডিফল্ট Touchable কম্পোনেন্টগুলো দিয়ে সীমাবদ্ধতা রয়েছে, যেমন অনেক ধরনের জেসচার সঠিকভাবে পরিচালনা করা কঠিন হতে পারে। কিন্তু react-native-gesture-handler প্যাকেজটি এসব সমস্যা সমাধান করে এবং শক্তিশালী জেসচার ম্যানেজমেন্টের সুবিধা প্রদান করে।

react-native-gesture-handler লাইব্রেরিটি বিভিন্ন ধরনের touch gestures যেমন swipes, pinches, taps, এবং dragging ইত্যাদি ম্যানেজ করার জন্য ব্যবহৃত হয়। এই প্যাকেজটি আরও উন্নত ইন্টারঅ্যাকশন তৈরি করতে সহায়ক।

React Native Gesture Handler সেটআপ

প্রথমে, আপনাকে react-native-gesture-handler প্যাকেজটি ইনস্টল করতে হবে।

npm install react-native-gesture-handler

ইনস্টলেশনের পরে, আপনাকে কিছু প্রাথমিক কনফিগারেশন করতে হতে পারে (যেমন MainActivity.java বা AppDelegate.m ফাইলের মধ্যে কিছু সেটআপ)। তবে এখন থেকে, আপনি gesture handler ব্যবহারের জন্য প্রস্তুত।

Gesture Handler এর কম্পোনেন্টস

React Native Gesture Handler কিছু কম্পোনেন্ট এবং API প্রদান করে যা touch events এবং gestures সহজে হ্যান্ডেল করতে সহায়ক।

১. TouchableWithoutFeedback

এটি একটি কম্পোনেন্ট যা ব্যবহারকারী যে কোনও ধরনের touch event যেমন tap বা press এর মাধ্যমে ইন্টারঅ্যাকশন করতে পারে।

import React from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';

const App = () => {
  const handlePress = () => {
    alert('Pressed!');
  };

  return (
    <TouchableWithoutFeedback onPress={handlePress}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Press anywhere to trigger an action!</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default App;

২. PanGestureHandler

PanGestureHandler এর মাধ্যমে আপনি dragging gestures ম্যানেজ করতে পারেন, যেমন একটি ড্র্যাগ অপারেশন চালানো।

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

const PanGestureExample = () => {
  const [translateX, setTranslateX] = useState(0);
  const [translateY, setTranslateY] = useState(0);

  const onGestureEvent = (event) => {
    setTranslateX(event.nativeEvent.translationX);
    setTranslateY(event.nativeEvent.translationY);
  };

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <View
        style={[
          styles.box,
          {
            transform: [{ translateX: translateX }, { translateY: translateY }],
          },
        ]}
      >
        <Text style={styles.text}>Drag me!</Text>
      </View>
    </PanGestureHandler>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default PanGestureExample;

৩. TapGestureHandler

TapGestureHandler ব্যবহার করে আপনি tap gestures যেমন একাধিক tap ইভেন্ট ম্যানেজ করতে পারেন।

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TapGestureHandler } from 'react-native-gesture-handler';

const TapGestureExample = () => {
  const onTap = () => {
    alert('Tapped!');
  };

  return (
    <TapGestureHandler onActivated={onTap}>
      <View style={styles.button}>
        <Text style={styles.text}>Tap me!</Text>
      </View>
    </TapGestureHandler>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'green',
    padding: 20,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    fontSize: 18,
  },
});

export default TapGestureExample;

৪. PinchGestureHandler

PinchGestureHandler ব্যবহার করে আপনি pinch gestures বা zoom ইভেন্ট ম্যানেজ করতে পারেন।

import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';

const PinchGestureExample = () => {
  const [scale, setScale] = useState(1);

  const onPinchEvent = (event) => {
    setScale(event.nativeEvent.scale);
  };

  return (
    <PinchGestureHandler onGestureEvent={onPinchEvent}>
      <View style={[styles.box, { transform: [{ scale: scale }] }]}>
        <Text style={styles.text}>Pinch to Zoom</Text>
      </View>
    </PinchGestureHandler>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default PinchGestureExample;

Gestures কাস্টমাইজেশন

React Native Gesture Handler আরও কাস্টমাইজেশন প্রদান করে যেমন:

• gestureState: Gesture Handler এর মাধ্যমে গেসচার স্টেট পরিচালনা করা, যাতে আপনি শুরু, চলমান এবং শেষ ইভেন্ট ট্র্যাক করতে পারেন।
• gestureHandlerProps: ডিফল্ট GestureHandler প্রপস গুলি যেমন onGestureEvent, onHandlerStateChange এবং enabled এর মাধ্যমে গেসচারদের কাস্টমাইজ করা।

সারাংশ

React Native Gesture Handler লাইব্রেরি touch gestures এবং gestures ব্যবস্থাপনা সহজ করে তোলে। এটি বিভিন্ন ধরনের gestures যেমন tap, swipe, drag, pinch, ইত্যাদি ব্যবস্থাপনা করতে সাহায্য করে, যা আপনার অ্যাপ্লিকেশনকে আরো ইন্টারেকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে।

• PanGestureHandler দিয়ে আপনি dragging gestures পরিচালনা করতে পারবেন।
• TapGestureHandler দিয়ে আপনি tap gestures ম্যানেজ করতে পারবেন।
• PinchGestureHandler দিয়ে আপনি zoom বা pinch gestures ম্যানেজ করতে পারবেন।

Gesture Handler React Native এ আরও উন্নত ও শক্তিশালী ইন্টারঅ্যাকশন তৈরি করতে সহায়ক।